<template>
<div class="listSinger">
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li v-for="item in singerList" :key="item.singer_id" @click="singerPage(item)">
        <img v-lazy="item.singer_pic" />
        <div class="detail">
          <span class="singer-name"> {{ item.singer_name }}</span>
          <span class="like" @click.stop="toggleFavorite(item)">{{getFavoriteText(item)}}</span>
        </div>
      </li>
    </ul>
  </div>
</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import BScroll from 'better-scroll'
import { singerMixin } from '@/common/js/mixin'
export default {
  mixins: [singerMixin],
  props: {
    singerList: {
      type: Array,
      required: true
    }
  },
  methods: {
    ...mapMutations(['setSinger', 'setType', 'setSingerImg', 'setSingerMid']),
    singerPage (singerDate) {
      // 改变vuex中存储的歌手信息
      // 歌手名
      this.setSinger(singerDate)
      // // 类别
      this.setType('歌手')
      // 跳转到歌手详情页
      const mid = singerDate.singer_mid
      this.$router.push('/singer/mid=' + mid)
    }
  },
  computed: {
    ...mapState(['singerImg'])
  },
  mounted () {
    const options = {
      click: true,
      tap: true,
      mouseWheel: true, // 开启鼠标滚轮
      disableMouse: false, // 启用鼠标拖动
      disableTouch: false // 启用手指触摸
    }
    this.scroll = new BScroll(this.$refs.wrapper, options)
  },
  updated () {
    this.$nextTick(() => {
      this.scroll.refresh()
    })
  }
}
</script>

<style lang="stylus" scoped>
.listSinger {
  padding: 0 20px;
  .wrapper {
    height: 100vh;
    overflow: hidden;
    li {
      width: 100%;
      display: flex;
      padding-bottom: 15px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 20px;
      }
      .detail {
        display: flex;
        flex: 1;
        justify-content :space-between;
        align-items:center;
        span {
          padding: 6px;
          font-weight: 700;
        }
        .singer-name {
          max-width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .like {
          color: #6d6d6d;
          margin-right: 20px;
        }
      }
    }
  }
}

</style>
